<template>
  <div>
    <el-form :model="functionListModel" ref="functionListEditForm" :rules="rules">
      <el-row>
        <el-col>
          <el-form-item label="Function Name:" prop="functionName">
            <el-input v-model="functionListModel.functionName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="Function Description:" prop="functionDesc">
            <el-input v-model="functionListModel.functionDesc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="Is Status Related:">
            <el-checkbox v-model="functionListModel.statusRelated"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="Is Role Related:">
            <el-checkbox v-model="functionListModel.roleRelated"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="Is Active:">
            <el-checkbox v-model="functionListModel.active"></el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      functionListModel: {},
      rules: {
        functionName: [
          {required: true, message: 'This string contain only spaces', trigger: 'change'},
          {min: 3, max: 60, message: 'length must be between 3 and 60', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    setFunctionListEditModel(functionListModel) {
      this.functionListModel = functionListModel
      this.$nextTick(() =>
        this.$refs.functionListEditForm.clearValidate()
      )
    },
    getFunctionListEditModel() {
      return this.functionListModel
    },
    validateForm(fn) {
      return this.$refs.functionListEditForm.validate()
    }
  }
}
</script>

<style scoped>

</style>
